<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="../lib/vue2.js"></script>
  </head>
  <body>
    <div id="box">
      <com-one></com-one>
      <com-three></com-three>
    </div>

    <script>
      // 创建组件
      Vue.component("comOne", {
        template: ` <div><button>组件1</button>
            <com-two></com-two></div>`,

        components: {
          comTwo: {
            template: ` <div><button @click=handleClick>组件2</button></div>`,
            data() {
              return {
                info: "组件2的信息",
              };
            },
            methods: {
              handleClick() {
                bus.$emit("myEvent", this.info);
              },
            },
          },
        },
      });

      Vue.component("comThree", {
        template: ` <div><button>组件3</button>{{info}}</div>`,
        data() {
          return {
            info: "",
          };
        },
        mounted() {
          bus.$on("myEvent", (data) => {
            this.info = data;
          });
        },
      });

      // 中央事件总线是一个空的 Vue 实例
      let bus = new Vue();

      new Vue({
        el: "#box",
        data: {},
      });
    </script>
  </body>
</html>
